<template>
	<view>
		<u-list>
			<u-list-item v-for="(paym, index) in tableData" :key="paym.id">
				<u-cell :label="'账目类型:'+paym.payMentMethod.method+',账单金额:¥'+paym.amountReceivable">
					<view slot="title" class="u-slot-title">
						<text class="u-cell-text">账单编号:{{paym.billNumber}}</text>
						<view>
							<u-tag plain size="mini" type="success" v-if="paym.billingStatus == '1'" text="已支付"></u-tag>
							<u-tag plain size="mini" type="error" v-else-if="paym.billingStatus == '2'" text="未支付"
								@click="handle(paym, index)">
							</u-tag>
						</view>
					</view>
				</u-cell>
			</u-list-item>
		</u-list>
		<u-popup :show="showApppayment" @close="showApppayment = false" mode="top">
			<view style="height: 200px;margin: 20px;">
				<view class="text-box" scroll-y="true">
					<text>账单编号:&nbsp;{{payMentVo.billNum}}</text>
				</view>
				<view class="text-box" scroll-y="true">
					<text>业主姓名: {{payMentVo.lName}}</text>
				</view>
				<view class="text-box" scroll-y="true">
					<text>所属房屋:&nbsp;{{payMentVo.payMentRecords.room.buildingNum}}&nbsp;{{payMentVo.payMentRecords.room.unit}}&nbsp;{{payMentVo.payMentRecords.room.floor}}楼-{{payMentVo.payMentRecords.room.roomNum}}号</text>
				</view>
				<view class="text-box" scroll-y="true">
					<text>账目类型: {{payMentVo.payMentRecords.chargeConfig.chargeProject}}</text>
				</view>
				<view class="text-box" scroll-y="true">
					<text>应收金额: ¥{{payMentVo.payMentRecords.amountReceivable}}元</text>
				</view>
				<view class="text-box" scroll-y="true">
					<text>应收日期: {{payMentVo.payMentRecords.collectionTime}}</text>
				</view>
				<u-button type="primary" text="确认支付" customStyle="margin-top: 15%;width: 30%" @click="updatepayment()">
				</u-button>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showApppayment: false,
				payMentVo: {
					billNum: "",
					tHouse: "",
					lName: "",
					ccId: 0,
					pmId: 0,
					sort: "",
					pageBean: {
						currPage: 1,
						pageSize: 50,
						totalPages: 0,
						totalNum: 0,
					},
					payMentRecords: {
						id: 0,
						amountReceivable: "",
						billingCycle: "",
						billingStatus: "",
						collectionTime: "",
						payMentMethod: {
							id: 0,
						},
						chargeConfig: {
							id: 0,
							chargeProject: ""
						},
						room: {
							id: 0,
							buildingNum: "",
							unit: "",
							floor: "",
							roomNum: ""

						},
						landlord: {
							id: 0,
						},
					},
				},
				pageSizes: [5, 10, 20, 50],
				tableData: [],
			};
		},
		onLoad() {
			this.payList(this.payMentVo)
			//this.getData()
		},
		methods: {
			//获取缴费记录数据
			payList(payMentVo) {
				this.$axios
					.post("/pay/findPayMentyz", payMentVo)
					.then((r) => {
						//console.log(payMentVo);
						//console.log(r.data.data.data);
						this.tableData = r.data.data.data;
						this.payMentVo.pageBean.totalNum = r.data.data.totalNum;
					});
			},
			//点击未支付确认支付
			handle(value, index) {

				this.payMentVo.payMentRecords.id = value.id;
				this.payMentVo.billNum = value.billNumber;
				this.payMentVo.lName = value.landName;
				this.payMentVo.payMentRecords.room.buildingNum = value.room.buildingNum;
				this.payMentVo.payMentRecords.room.unit = value.room.unit;
				this.payMentVo.payMentRecords.room.floor = value.room.floor;
				this.payMentVo.payMentRecords.room.roomNum = value.room.roomNum;
				this.payMentVo.payMentRecords.chargeConfig.chargeProject = value.chargeConfig.chargeProject;
				this.payMentVo.payMentRecords.amountReceivable = value.amountReceivable.toFixed(2);
				this.payMentVo.payMentRecords.collectionTime = value.collectionTime;
				this.showApppayment = true;
			},
			updatepayment() {
				console.log(this.payMentVo.payMentRecords.id);
				this.$axios
					.post("/pay/update", this.payMentVo.payMentRecords)
					.then((r) => {
						//console.log(payMentVo);
						console.log(r);
						this.showApppayment = false;
					});
			}
		},
	}
</script>

<style lang="scss">
	.u-slot-title {
		@include flex;
		flex-direction: row;
		align-items: center;
	}
</style>
